<!--
 * @Author: Haochen
 * @Date: 2021-11-19 18:11:13
 * @LastEditTime: 2021-11-28 23:16:28
 * @FilePath: \front\src\html\index.html
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img id="zombie" src="../img/zombie-front-end.png" alt="">

    <header>
        <div class="head-left">
            <img src="../img/logo.png" alt="">
            <h2>植物大战编程</h2>
        </div>

        <div class="head-right">
            <div class="user">
                <img src="../img/user.png" alt="">
                <h3>张三</h3>
            </div>

            <img src="../img/exit.png" alt="" id="logoff">
        </div>
    </header>

    <main>
        <div class="main-top">
            <div class="option-1">
                正式考试
                <img src="../img/exam.png" alt="">
            </div>
            <div class="option-2">
                模拟考试
                <img src="../img/model-exam.png" alt="">
            </div>
            <div class="option-3">
                每日一测
                <img src="../img/quiz.png" alt="">
            </div>
            <div class="option-4">
                顺序练习
                <img src="../img/circular.png" alt="">
            </div>
            <div class="option-5">
                分类练习
                <img src="../img/category.png" alt="">
            </div>
        </div>

        <div class="main-bottom">
            <div class="mb-top">
                <div class="tabs">
                    <div class="tab-selected tab-1">首页</div>
                    <div class="tab-2">我的收藏</div>
                    <div class="tab-3">错题库</div>
                </div>
                <div class="ranking">
                    <img src="../img/ranking.png" alt="">
                    排行榜
                </div>
            </div>
            <div class="mb-bottom">
                <div class="mb-bottom-1">
                    <div class="data-panel">
                        <div class="dp-left">
                            <h2>数据看板</h2>
                            <div class="data-boxes">
                                <div class="data-box-1">
                                    <div id="num-questions">138</div>
                                    <h4>练习题数</h4>
                                </div>
                                <div class="data-box-2">
                                    <div id="num-days">23</div>
                                    <h4>学习天数</h4>
                                </div>
                                <div class="data-box-3">
                                    <div id="exam-score">6分</div>
                                    <h4>最近考试</h4>
                                </div>
                            </div>
                        </div>
                        <div class="dp-right">
                            <div id="dpr-bar-1">
                                <h4>已学习了 5 天</h4>
                                <img src="../img/goal.png" alt="">
                            </div>
                            <div id="dpr-bar-2">
                                <div class="dpr-box">12</div>
                                <div class="dpr-box">12</div>
                                <div class="dpr-box">12</div>
                                <div class="dpr-box">12</div>
                                <div class="dpr-box">12</div>
                                <div class="dpr-box">12</div>
                                <div class="dpr-box">12</div>
                            </div>
                        </div>
                    </div>
                    <div class="notifications">
                        <ul class="ntf-list">
                            <li class="ntf-title">
                                <h3>通知公告</h3>
                                <div class="dropdown">
                                    <div class="drop-first-item">
                                        全部 <img src="../img/inv-tri.png" alt="">
                                    </div>
                                    <ul class="drop-list">
                                        <li>全部</li>
                                        <li>未读</li>
                                        <li>已读</li>
                                    </ul>
                                </div>

                            </li>
                            <li>
                                <h5 class="ntf-info">十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）</h5>
                                <h6 class="ntf-date">2021-11-20 00:30</h6>
                            </li>
                            <li>
                                <h5 class="ntf-info">全面改革：解读Vue.js 3.0的变化</h5>
                                <h6 class="ntf-date">2021-11-21 09:30</h6>
                            </li>
                            <li>
                                <h5 class="ntf-info">前端简洁并实用的工具类函数封装</h5>
                                <h6 class="ntf-date">2021-11-22 00:30</h6>
                            </li>
                            <li>
                                <h5 class="ntf-info">研究人员称 HTML5 可以被用来追踪网民</h5>
                                <h6 class="ntf-date">2021-11-23 11:30</h6>
                            </li>
                            <li>
                                <h5 class="ntf-info">7个好习惯成就高级程序员，你拥有几个？</h5>
                                <h6 class="ntf-date">2021-11-24 10:30</h6>
                            </li>
                            <li>
                                <h5 class="ntf-info">妈妈再也不用担心我不会webpack了</h5>
                                <h6 class="ntf-date">2021-11-25 12:30</h6>
                            </li>
                        </ul>

                    </div>
                    <div class="more-data">查看更多数据</div>



                </div>

                <div class="mb-bottom-2">
                    <div class="content">

                        <div class="content-question">

                        </div>
                    </div>
                    <div class="sidebar">
                        <div class="sb-box-1">
                            <span>题卡：</span>
                            <div class="sb-row">
                                共 <span class="num-collected-questions"></span> 道
                            </div>
                        </div>

                        <div class="sb-box-2">


                        </div>

                        <div class="sb-row-2">
                            <span>默认显示解析</span>
                            <input type="checkbox" id="input" checked />
                            <label for="input" id="label"> </label>

                        </div>
                    </div>
                </div>

                <div class="mb-bottom-3">
                    <div class="content">
                        <div class="content-question">

                        </div>
                    </div>
                    <div class="sidebar">
                        <div class="sb-box-1">
                            <span>题卡：</span>
                            <div class="sb-row">
                                共 <span class="num-wrong-questions"></span> 道
                            </div>
                        </div>

                        <div class="sb-box-2">
                        </div>

                        <div class="sb-row-2">
                            <span>默认显示解析</span>
                            <input type="checkbox" id="input-2" checked />
                            <label for="input-2" id="label-2"> </label>

                        </div>
                    </div>
                </div>
            </div>




        </div>


    </main>

    <div class="ntf-modal">
        <button class="close">&times;</button>
        <div class="modal-title">
            十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）
        </div>
        <div class="modal-date-time">
            <h5>信息中心</h5>
            <div class="m-date-time">2021-11-21 12:30</div>
        </div>
        <iframe src="http://www.qianduandaxue.com/css/157.html" class="modal-article">

        </iframe>
    </div>

    <div class="ranking-modal">
        <button class="close">&times;</button>
        <div class="modal-title">
            排行榜
        </div>
        <div class="ranking-selection">
            <select name="" id="ranking-sel">
                <option value="none">请选择一场考试</option>
            </select>
        </div>


        <ol class="ol-ranking">
           
        </ol>

    </div>

    <div class="user-modal">
        <h2 class=".modal-title">修改资料</h2>
        <button class="close">&times;</button>
        <div class="modal-main">
            <ul class="u-sidebar">
                <li>手机号</li>
                <li>设置头像</li>
                <li>姓名</li>
                <li>性别</li>
                <li>选择部门</li>
            </ul>
            <ul class="u-main">
                <li>
                    <input type="text" placeholder="123" disabled>
                    &nbsp;*手机号暂时不允许修改，如需修改，请联系我们
                </li>
                <li>
                    <img id="img-upload" src="" alt="">
                    <input type="file" id="file-upload-img">
                </li>
                <li><input type="text" placeholder="姓名"></li>
                <li id="li-sex">
                    <div class="radio-box">
                        <input type="radio" name="sex" id="radio-male" value="男">
                        <label for="radio-male">男</label>

                        <input type="radio" name="sex" id="radio-female" value="女">
                        <label for="radio-female">女</label>
                    </div>
                </li>
                <li id="li-dept">
                    <div class="cb-box">
                        <input type="checkbox" name="department" id="cb-office" value="办公室">
                        <label for="cb-office">办公室</label>
                    </div>
                    <div class="cb-box">
                        <input type="checkbox" name="department" id="cb-info-centre" value="信息中心">
                        <label for="cb-info-centre">信息中心</label>
                    </div>
                    <div class="cb-box">
                        <input type="checkbox" name="department" id="cb-base-dept" value="基础部">
                        <label for="cb-base-dept">基础部</label>
                    </div>


                </li>
            </ul>
        </div>
        <button id="submit-user-change">提交修改</button>

    </div>


</body>

</html>